<html>
    <head>
        <style>
            *{
                padding:0;
                margin:0;
            }
            .container{
                min-width:800px;
                border:5px solid #F00;
                /* 在等高布局中 overflow: hidden; 还有一个作用 ，父容器溢出元素部分隐藏掉 */
                overflow: hidden;
            }
            .content{
                float:left;
                width:100%;
            }
            .inner{
                border:5px solid #F00;
                margin:0 200px;
                background:#CCC;
                height:1000px;
            }
            .left{
                float:left;
                background:#222;
                width:200px;
                height:800px;
                margin-left: -100%;
            }
            .right{
                float:left;
                background:#555;
                width:200px;
                height:200px;
                margin-left: -200px;
            }
            .inner,.left,.right{
                padding-bottom:5000px;
                margin-bottom:-5000px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="inner">等高布局</div>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <script></script>
    </body>
</html>